<template>
<h1>计算器练习</h1>
  <h2>计算结果: <mark>{{ result }}</mark></h2><br>
  <hr>
  <input type="text" v-model="num1"><br>
  <input type="text" v-model="num2"><br>
  <button @click="f('+')">加</button>
  <button @click="f('-')">减</button>
  <button @click="f('*')">乘</button>
  <button @click="f('/')">除</button>

</template>

<script setup>
import {ref} from "vue";

const num1=ref('');
const num2=ref('');
const result=ref('');
const f=(o)=>{
  // 响应式变量在js 中使用,必须要用.value
  // eval("5*2")结果为10 会将字符串形式的算式自动进行js 计算
  result.value=eval(num1.value+o+num2.value);
}
</script>


<style scoped>

</style>